<template>
  <div class="patient-reported-left-add-visit">
    <div class="dialog-content">
      <div>
        <div>
          <span>*</span>选择访视类型：
          <el-select size="mini" v-model="selected" value-key="id" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.visitName" :value="item">
            </el-option>
          </el-select>
        </div>
      </div>
      <div v-if="selected && selected.visitType == 4">
        <div>
          <div style="display: inline-block;width: 90px;text-align: right;">
            <span style="color: red;">*</span>

            <span>访视名称：</span>
          </div>
          <span>
            <el-select size="mini" v-model="visitNameSelected" value-key="id" placeholder="请选择">
              <el-option v-for="visitName in visitNameOptions" :key="visitName" :label="visitName" :value="visitName">
              </el-option>
            </el-select>
          </span>
        </div>

      </div>
      <div id="transfer-box" v-if="selected && selected.visitType == 3">
        <div><span>*</span>拟增加的eCRF表：</div>
        <el-transfer v-model="transferValue" :data="data"></el-transfer>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="$emit('close')">取 消</el-button>
      <el-button type="primary" size="mini" @click="onSubmit">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";

export default {
  data () {
    return {
      data: [],
      options: [],
      visitNameOptions: [],
      selected: null,
      visitNameSelected: null,
      transferValue: [],
      visitTableList: []
    };
  },
  computed: {
    ...mapState({
      subjectInfo: state => state.treatment.subjectInfo
    }),
    ...mapGetters({
      findRole: "treatment/findRole"
    })
  },
  watch: {
    selected: {
      handler: function (val) {
        const { visitType, loopName } = val;
        this.visitNameSelected = null;
        this.transferValue = [];
        if (visitType == 3) {
          // 关联查询
          if (this.selected && this.selected.id) {
            this.findVisitTableLists();
          }
        } else if (visitType == 4) {
          // 分割
          this.visitNameOptions = loopName.split(",");
        }
      }
    }
  },
  mounted () {
    this.findSubjectVisitAddSelect();
  },
  methods: {
    ...mapActions('eCRFDetail', ['subjectVisitAddSelect', 'findVisitTableList', 'createVisit']),
    onSubmit () {
      if (
        this.selected &&
        (this.visitNameSelected || this.transferValue.length > 0)
      ) {
        const { id, databaseVersion } = this.subjectInfo;
        let coreCodes = ''
        let coreNames = ''
        this.subjectInfo.subjectDetails && this.subjectInfo.subjectDetails.forEach(item => {
          if (item.variable === 'SITEID') {
            coreCodes = item.variableValue
          }
          if (item.variable === 'SITENAME') {
            coreNames = item.variableValue
          }
        })
        let data = {
          id: this.selected.id,
          subjectId: id,
          databaseVersion,
          roleId: localStorage.getItem('roleId'),
          coreCode: coreCodes,
          coreName: coreNames
        };

        if (this.visitNameSelected) {
          data.visitName = this.visitNameSelected;
        } else {
          data.tableIds = this.transferValue;
        }
        this.createVisit({ data }).then(res => {
          const { code } = res
          if (code === 200) {
            this.$emit('addVisitSuccess')
            this.$message({
              message: "新增成功",
              type: "success"
            });
          }
        })
      } else {
        this.$message({
          message: "请将数据填写完整",
          type: "warning"
        });
      }
    },
    // 获取增加的eCRF表
    findVisitTableLists () {
      const params = {
        subjectVisit: this.selected.id
      };
      this.findVisitTableList({ params }).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.data = data.map(item => {
            item.label = item.visitTableName?item.visitTableName:item.tableName
            item.key = item.id
            return {label:item.label,key: item.key}
          });
        } else {
          this.$message.error(message);
        }
      })
    },
    // 获取访视类型
    findSubjectVisitAddSelect () {
      const { id, databaseId, databaseVersion } = this.subjectInfo;
      const params = {
        subjectId: id,
        databaseId,
        databaseVersion
      };
      this.subjectVisitAddSelect({ params }).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.options = data;
        } else {
          this.$message.error(message);
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.patient-reported-left-add-visit {
  .dialog-content {
    >div {
      padding-top: 0.8rem;

      >div {
        text-align: left;
        font-size: 0.75rem;
        color: #303133;
        padding-bottom: 0.35rem;

        >span {
          color: #f56c6c;
        }
      }
    }
  }
}

.el-select-dropdown__item {
  font-size: 0.75rem;
}

.el-select-dropdown__item.selected {
  color: #6b1685;
}

.dialog-footer {
  margin-top: 20px;
  text-align: center;
}
</style>